<template>
   <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="content" >
       
            <el-form-item label="原手机号:" prop="quondam">
                123456
            </el-form-item>

            <!-- 验证码 -->
            <el-form-item label="验证码" prop="smsCode">
                <el-input v-model="ruleForm.smsCode" placeholder="请输入6位验证码" maxlength="6" show-word-limit
                    class="input_width" style="width:80%;margin-right: 2%;"></el-input>
                <el-button v-bind:type="button_sms_type"  v-bind:disabled="button_sms_disable">
                    {{button_sms_value}}</el-button>
            </el-form-item>


            <el-form-item label="新手机号:" prop="new" >
                <el-input placeholder="" v-model="ruleForm.new">
                </el-input>
            </el-form-item>

        <el-button type="success" style="margin-left:35%;margin-top: 3%;">
                    保存
                </el-button>
                <el-button type="primary" @click="personalProfil">
                    返回
                </el-button>
    </el-form>
</template>
  
<script>
export default {
    data() {
        return {
            button_sms_type: 'success',
                button_sms_value: '验证码',
                button_sms_disable: false,
                sms_time_count: 60,
                sms_timer: null,
            ruleForm: {
                quondam: '',
                verificationCode: '',
                new: '',
            },
            rules: {
                smsCode: [
                    { required: true, message: '请输入验证码', trigger: 'blur' }
                ],
                new: [
                    { required: true, message: '请输入新手机号', trigger: 'blur' }
                ],
            }
        };

    },
    props: {
        isShowAddDialog: {
            type: Boolean
        }
    },

    methods: {
        sms_count_down() {
            // 验证码倒计时
            if (!this.sms_timer) {
                this.count = this.sms_time_count
                //验证码发送成功，倒计时
                this.button_sms_type = 'info'
                this.button_sms_disable = true
                this.button_sms_value = "已发送(" + this.count + ")"

                //第一种缩写写法
                this.sms_timer = setInterval(() => {
                    if (this.count > 0 && this.count <= this.sms_time_count) {
                        this.count--

                        this.button_sms_value = "已发送(" + this.count + ")"
                        console.log(this.count)
                    } else {
                        clearInterval(this.sms_timer)
                        this.sms_timer = null
                        console.log('倒计时结束')
                        this.button_sms_type = 'success'
                        this.button_sms_disable = false
                        this.button_sms_value = '验证码'
                    }
                }, 1000)
            }
        },
        
    dialogClose() {
        this.$emit('dialogClose')
    },
    submitForm() {
        this.$refs.ruleForm.validate((valid) => {
            if (!valid) {
                return
            }
            else {
                this.$emit('dialogClose')
            }
        });
    },
    personalProfil() {
            this.$router.push('/personal')
        },
    }
}




</script>
  
<style>
.content {
    background-color: #ffffff;
    border-radius: 5px;
    width: 50%;
    margin: 0 auto;
    padding: 2%;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}
</style>
  